export default {
  mounted(el: any, binding: any) {
    const slideDom: HTMLElement = document.querySelector(binding.value)
    el.onmouseenter = () => {
      // 会导致 dom tree 解析
      slideDom.style.height = 'auto'
      // 会导致 `回流`, 重新计算它的几何信息, 但不会导致`绘制`
      const { height = 0 } = slideDom.getBoundingClientRect()
      slideDom.style.height = 0 + 'px'
      // 0 - height 之间需要使用 requestAnimationFrame 或者 强制回流
      // 目的: 为了让 height = 0, 生成到布局树种中
      slideDom.style.transition = 'height .5s'
      slideDom.getBoundingClientRect()
      slideDom.style.height = height + 'px'
    }
    el.onmouseleave = () => {
      slideDom.style.height = 0 + 'px'
    }
  },
}
